<template>
  <div class="max">
    <div class="container">
      <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="as"  
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item class="zx">
          贫困户1号</el-breadcrumb-item
        >
      </el-breadcrumb> -->
      <span>首页</span> 
      <span class="position">{{info.name}}</span>
      <!-- <p>首页</p>
      <p>贫困户1号</p> -->
    </div>
    <div class="left">
      <img :src="info.cover" alt="" />
    </div>
    <div class="right">
      <h1>{{info.name}}</h1>
      <el-form label-width="80px">
        <el-form-item label="编号:">
          <el-input type="text" v-model="info.sn"></el-input>
        </el-form-item>
        <el-form-item label="家庭成员:">
          <el-input type="text" v-model="info.member"></el-input>
        </el-form-item>
        <el-form-item label="成员人数:">
          <el-input type="text" v-model="info.number"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址:">
          <el-input type="text" v-model="info.address"></el-input>
        </el-form-item>
        <el-form-item label="家庭状况:">
          <el-input type="text" v-model="info.condition"></el-input>
        </el-form-item>
        <el-form-item label="人均收入:">
          <el-input type="text" v-model="info.income"></el-input>
        </el-form-item>
        <el-form-item label="账号:">
          <el-input type="text" v-model="info.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input type="text" v-model="info.name"></el-input>
        </el-form-item>
        <el-form-item label="点击次数:">
          <el-input type="text" v-model="info.clickNum"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer"  >
      <el-tabs type="border-card">
  <el-tab-pane label="详细介绍" >{{info.introduce}}</el-tab-pane>
</el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: null,

    };
  },
  methods: {
    async getInfo(id) {
      let { data: res } = await this.$axios.get(
        "/poor/getlist?pageNum=1&pageSize=3&id=" + id
      );
      this.info = res.data.list[0];
      // this.getInfo(id)
    },
  },
  created() {
    let id = this.$route.params.id;
    this.getInfo(id);
  },
};
</script>
<style scoped lang="scss"  >
// .as{
//     margin: 20px;
    
// }
// .zx{
//     width: 80px;
//     height: 30px;
//      margin: 20px;
//      background-color: #fff;
//      margin: 0 auto;
//      border-radius: 5px;
//      margin-top: 10px;
//      text-align: center;
// }
.max {
  width: 800px;
  margin: 0 auto;
}
.container {
  width: 800px;
  height: 50px;
  background-color: rgb(54, 150, 205);
  margin: 0 auto;
  border-radius: 5px;
  span{
   height: 30px;
   color: #fff;
   line-height: 50px;
   margin: auto 10px;
}
.position{
    color: black;
    padding: 5px 10px;
    border-radius: 5px ;
    background-color: #fff;
}

}
.left {
  width: 400px;
  img {
    width: 300px;
    height: 300px;
    margin-top: 30px;
    margin-left: 30px;
    border-radius: 10%;
    box-shadow: 0 0 10px  rgb(93, 192, 237);
  }
}
.right {
  width: 400px;
  // float: right;
  margin-left: 380px;
  margin-top: -300px;
  h1 {
    text-align: center;
    font-size: 20px;
  }
}
.footer.label{
    color: black;
}
</style>